<template>
  <div class="container">
    <div class="add">
      <el-button
        size="mini"
        icon="icon-a-tianjiaxinzeng"
        type="plain"
        plain
        @click="addBaseParam"
      >
        新增
      </el-button>
    </div>
    <div>
      <base-table :tableSetting="baseTableSetting"></base-table>
    </div>

    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <fieldset>
        <legend>基本参数</legend>
        <editForm
          :formConfig="formConfig"
          ref="editForm"
          :formData="editFormData"
        ></editForm>
      </fieldset>
      <div class="paramList" v-show="isMultiSelect">
        <editTable
          :tableSetting="tableSettingParam"
          ref="tableParam"
        ></editTable>
      </div>
    </dialogPublic>
  </div>
</template>

<script>
export default {
  props: ["baseParamList"],
  data() {
    return {
      title: "",
      show: false,
      isMultiSelect: false, //
      //基本参数
      baseTableSetting: {
        indexShow: true,
        column: [
          {
            label: "参数名称",
            textAlign: "center",
            prop: "paramName",
          },
          {
            label: "数据类型",
            textAlign: "center",
            prop: "dataType",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "standard_data_type",
                row.dataType
              );
            },
          },
          {
            label: "数据长度",
            textAlign: "center",
            prop: "dataLength",
          },
          {
            label: "精度",
            textAlign: "center",
            prop: "dataPrecision",
          },
          {
            label: "输入类型",
            textAlign: "center",
            prop: "enterType",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "standard_enter_type",
                row.enterType
              );
            },
          },
          {
            label: "是否必填",
            textAlign: "center",
            prop: "isMust",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "standard_is_must",
                row.isMust
              );
            },
          },
          {
            label: "单位",
            textAlign: "center",
            prop: "dataUnit",
          },
          {
            label: "参数说明",
            textAlign: "center",
            prop: "desc",
          },
          {
            label: "参数值列表",
            textAlign: "center",
            prop: "dataText",
            formatter: (row) => {
              if (row.dataText) {
                return JSON.parse(row.dataText)
                  .map((item) => item.label)
                  .join(", ");
              }
            },
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "编辑",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.rowIndex = index;
                  this.editBaseParam(row);
                },
              },
              {
                text: "删除",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.$confirm("确定要删除该条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.baseTableSetting.data.splice(index, 1);
                    })
                    .catch((e) => {});
                },
              },
            ],
          },
        ],
        data: [],
        noBorderRight: true,
        autoHeight: true,
        rowIndex: 0,
      },
      //弹出框表单配置信息
      formConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            label: "参数名称",
            prop: "paramName",
            type: "text",
            maxlength: 20,
            span: 8,
            required: true,
            rules: {
              message: "参数名称重复",
              trigger: "blur",
              validator: (rule, value, callback) => {
                this.checkName(rule, value, callback);
              },
            },
          },
          {
            label: "输入类型",
            prop: "enterType",
            type: "select",
            span: 8,
            required: true,
            selectOption: this.$store.getters.dirtData("standard_enter_type"),
            methods: (val) => {
              if (val.value == "radio" || val.value == "multi") {
                this.isMultiSelect = true;
              } else {
                this.isMultiSelect = false;
                this.tableSettingParam.data.length = 0;
              }
              if (['box','radio','multi'].includes(val.value)) {
                this.setDisabled(false);
              }else{
                this.setDisabled(true);
              }
            },
          },
          {
            label: "数据类型",
            prop: "dataType",
            type: "select",
            span: 8,
            required: true,
            selectOption: this.$store.getters.dirtData("standard_data_type"),
            methods: (val,formData) => {
              if (val.value == "number") {
                this.setDisabled(false);
              } else {
                this.setDisabled(true);
              }
            },
          },
          {
            label: "数据长度",
            prop: "dataLength",
            type: "el-number",
            stepStrictly: true,
            step: 1,
            span: 8,
            required: false,
          },
          {
            label: "精度",
            prop: "dataPrecision",
            type: "el-number",
            span: 8,
            required: false,
            disabled: false,
          },
          {
            label: "单位",
            prop: "dataUnit",
            type: "text",
            span: 8,
            required: false,
            disabled: false,
          },
          {
            label: "是否必填",
            prop: "isMust",
            type: "select",
            span: 8,
            required: true,
            selectOption: this.$store.getters.dirtData("standard_is_must"),
          },

          {
            label: "参数说明",
            prop: "desc",
            type: "textarea",
            span: 16,
            //rows: 3,
            required: false,
          },
        ],
      },
      //参数列表编辑表格
      tableSettingParam: {
        showCheckbox: true,
        addMethons: (row, data) => {
          row.value = data.length;
          data.push(row);
        },
        btnArr: ["add", "edit", "delete"],
        column: [
          {
            label: "参数值",
            textAlign: "center",
            prop: "label",
            method: (row, index) => {
              let valueArr = this.tableSettingParam.data.map((item, i) => {
                if (i != index) {
                  return item.label;
                }
              });
              if (valueArr.indexOf(row.label) != -1) {
                this.$message.error("参数列表key值不能重复");
                row.key = "";
              }
            },
          },
        ],
        title: "参数列表",
        data: [],
        select: true,
        maxHeight: 200,
      },
      //弹出框表单数据
      editFormData: {},
      currentParamName: "",
    };
  },
  watch: {
    baseParamList: {
      handler(val) {
        this.baseTableSetting.data = val;
      },
      deep: true,
    },
  },
  created() {
    this.baseTableSetting.data = this.baseParamList;
  },
  methods: {
    //校验参数名称
    checkName(rule, value, callback) {
      let res = this.baseTableSetting.data.map((item) => {
        return item.paramName;
      });
      res.remove(this.currentParamName);
      if (res.indexOf(value) != -1) {
        //debugger
        return callback(new Error("参数名称重复"));
      } else {
        callback();
      }
    },
    setDisabled(val) {
      this.formConfig.itemArr[4].disabled = val;
      this.formConfig.itemArr[5].disabled = val;
    },
    //添加自定义参数
    addBaseParam() {
      this.title = "添加自定义参数";
      this.show = true;
      this.editFormData = {};
      this.isMultiSelect = false;
      this.tableSettingParam.data = [];
      this.currentParamName = "";
    },
    //编辑自定义参数
    editBaseParam(row) {
      this.title = "编辑自定义参数";
      this.editFormData = Object.assign({}, row);
      this.currentParamName = row.paramName;
      if (row.enterType == "radio" || row.enterType == "multi") {
        this.tableSettingParam.data = JSON.parse(row.dataText);
        this.isMultiSelect = true;
      } else {
        this.isMultiSelect = false;
      }
      this.show = true;
    },
    //提交表单
    async doSubmit() {
      try {
        let row = await this.$refs.editForm.getFormData();
        let paramList;
        if (this.isMultiSelect) {
          paramList = await this.$refs.tableParam.getTableData();
          if (paramList.length != 0) {
            row.dataText = JSON.stringify(paramList);
          } else {
            this.$message.warning("参数列表不能为空");
            return;
          }
        } else {
          row.dataText = "";
        }
        if (this.title == "添加自定义参数") {
          this.baseTableSetting.data.push(row);
        } else {
          this.baseTableSetting.data.splice(this.rowIndex, 1, row);
        }
        this.show = false;
      } catch (error) {
        this.$message.warning(error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .add {
    text-align: right;
    margin: 10px 0;
  }
  fieldset {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px #d7dae2 solid;
    padding: 0 30px 0 10px;
    margin-top: 10px;
  }
  legend {
    margin-left: 30px;
    text-align: left;
  }
  .paramList {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px #d7dae2 solid;
    padding: 0 30px 0 30px;
    margin-top: 10px;
  }
}
</style>